import React,{useState,useEffect} from 'react'
import {useParams,useRouteMatch} from 'react-router-dom'

const Detail = (props) => {
    console.log(props);
    // const para = useParams();
    // const match = useRouteMatch();
    // console.log(para);
    // console.log(match);
    const [topic,setTopic] = useState({});
    useEffect(()=>{
        let id = props.match.params.id
        fetch('https://cnodejs.org/api/v1/topic/'+id)
            .then(res=>res.json())
            .then(res=>{
                console.log(res);
                res.data && setTopic(res.data);
            })
    },[])
    return (
        <div>
            <ul>
                <li>
                    <img src={topic.author?.avatar_url} alt="" />
                </li>
                <li>{topic.author?.loginname}</li>
            </ul>

            <div dangerouslySetInnerHTML={{__html:topic.content}}></div>
        </div>
    )
}

export default Detail